<template>
  <Carousel class="carousel-box">
      <template #prevArrow>
        <div class="custom-slick-arrow" style="left: 50px; z-index: 1;">
          <left-circle-outlined />
        </div>
      </template>
      <template #nextArrow>
        <div class="custom-slick-arrow" style="right: 50px; z-index: 1;">
          <right-circle-outlined />
        </div>
      </template>
      <div class="bgbanner1"></div>
    </Carousel>
</template>
<script lang="ts" setup>
  import { Carousel } from 'ant-design-vue'
  import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue'

</script>
<style lang="less" scoped>
.carousel-box {
  width: 100%;
  height: 640px;
}
.bgbanner1, .bgbanner2, .bgbanner3 {
  height: 640px;
  width: 100%;
  background: url('../../../../assets/images/home/banner.png') no-repeat 50%;
  background-size: 100% 100%;
}

.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.6;
}
.ant-carousel :deep(.custom-slick-arrow:before) {
  display: none;
}
</style>
